{include file="common/top" /}

<div style="">
    <div class="layuimini-container">
        <div class="layuimini-main">
            <div class="layui-tab" lay-filter="filter">
                <ul class="layui-tab-title">
                  <li class="layui-this">快手</li>
                  <li>头条</li>
                  <li>知乎</li>
                  <li>广点通</li> 
                  <li>百度</li> 
                </ul>
            </div>
            <fieldset class="table-search-fieldset">
                <legend>搜索信息</legend>
                <form class="layui-form layui-form-pane" action="" lay-filter="from1">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input type="text" id="name" autocomplete="off" placeholder="请输入主账号名称"
                                       class="layui-input">
                            </div>
                            <div class="layui-input-inline">
                                <input type="text" id="name_id" autocomplete="off" placeholder="请输入账户ID" class="layui-input">
                            </div>
                            <div class="layui-input-inline">
                                <select id="industry_id" lay-verify="required" lay-search=""  autocomplete="off">
									<option value="">请选择行业</option>
									{volist name="industry_list" id='hy'}
										<option value="{$hy.id}" >{$hy.name}</option>
									{/volist}
						        </select>
                            </div>
                            <div class="layui-input-inline">
                                <select id="channel_id" lay-verify="required" lay-search=""  autocomplete="off">
									<option value="">请选择端口</option>
									{volist name="$channel_list" id='ch'}
										<option value="{$ch.id}" >{$ch.name}</option>
									{/volist}
						        </select>
                            </div>
                            <div class="layui-input-inline">
                                <select id="operate_id" lay-verify="required" lay-search=""  autocomplete="off">
									<option value="">请选择运营</option>
									{volist name="operate_list" id='op'}
										<option value="{$op.id}" >{$op.username}</option>
									{/volist}
						        </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="button" class="layui-btn layui-btn-primary" onclick="get_ss()"
                                    lay-filter="data-search-btn">
                                <i class="layui-icon"></i> 搜 索
                            </button>
                        </div>
                    </div>
                </form>
                <table class="layui-hide" id="currentTableId1" lay-filter="currentTableFilter"></table>
            </fieldset>
            <div class=" ">
                <table class="layui-hide" id="test" lay-filter="test"></table>
                <script type="text/html" id="toolbarDemo">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-sm" lay-event="getAdd">添加账户</button>
                    </div>
                </script>
                <script type="text/html" id="barDemo">
                    <a class="layui-btn layui-btn-xs" style="{{ d.pid ? 'display:none' : '' }}" data-pid='{{d.pid}}'
                       lay-event="addAcc">添加子账户</a>
                    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="edit">编辑</a>
					<!-- <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="certification">资质</a> -->
                    <a class="layui-btn layui-btn-xs" lay-event="getImpower">授权</a>
                    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="info">详情</a>
                </script>
                <script type="text/html" id="switchTpl">
                    <!-- 这里的 checked 的状态只是演示 -->
                    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="正常|禁用"
                           lay-filter="sexDemo" {{ d.status== 1 ? 'checked' : '' }}>
                </script>
                <script type="text/html" id="jinduswitchTpl">
                    {{d.jindu ==1?'开户中':''}}
					{{d.jindu ==2?'过素材':''}}
					{{d.jindu ==3?'过素材(1)':''}}
					{{d.jindu ==4?'过素材(2)':''}}
					{{d.jindu ==5?'备户完成':''}}
					{{d.jindu ==6?'开户成功':''}}
                </script>
            </div>
        </div>
    </div>
</div>
{include file="common/footer" /}
<script>
    //添加
    function get_add(type) {
        layer.open({
            type: 2,
            title: '添加账户信息',
            area: ['50%', '70%'],
            fixed: false, //不固定
            maxmin: true,
            shadeClose: true,
            scrollbar: false, //- 是否允许浏览器出现滚动
            content: "{:url('acc_add')}?type=" + type
        });
        //layer.full(index);
    }

    //编辑
    function get_save(id) {
        layer.open({
            type: 2,
            title: '编辑账户信息',
            area: ['50%', '70%'],
            fixed: false, //不固定
            maxmin: true,
            shadeClose: true,
            scrollbar: false, //- 是否允许浏览器出现滚动
            content: "{:url('acc_save')}?id=" + id
        });
        //layer.full(index);
    }
    //详情
    function get_info(id){
        layer.open({
            type: 2,
            title: '账户详情',
            area: ['70%', '100%'],
            offset: 'r',
            fixed: false, //不固定
            maxmin: true,
            shadeClose: true,
            scrollbar: false, //- 是否允许浏览器出现滚动
            content: "{:url('acc_info')}?id=" + id
        });
        //layer.full(index);
    }
	//账户授权
	function get_impower(id) {
		var u= 'https://ad.oceanengine.com/openapi/audit/oauth.html?app_id=1678787242274819&state='+id+'&scope=%5B1%2C2%2C3%2C4%2C5%2C8%2C9%5D&material_auth=1&redirect_uri=http%3A%2F%2Foa.mutangtech.com%2Fcallback%2Fzijie&rid=h9r9k7j3xlj';
		window.open(u); 
    }
	//快手账户授权
	function get_kuaishou_impower(id){
		var u= 'https://ad.e.kuaishou.com/#/openapi/oauth?app_id=165893111&scope=%5B%22report_service%22%2C%22ad_query%22%2C%22ad_manage%22%2C%22account_service%22%5D&redirect_uri=http://oa.mutangtech.com/callback/kuaishou&state='+id;
		window.open(u); 
	}
    //广点通授权
    function get_qq_impower(id){
        var u = 'https://developers.e.qq.com/oauth/authorize?client_id=1111497956&redirect_uri=http%3A%2F%2Foa.mutangtech.com%2FCallback%2Ftencent&state='+id;
        window.open(u);
    }
    var $,form, table,element,type=0;
    layui.use(['element','table','form'], function () {
    	pageLoading();
        table = layui.table, form = layui.form,element = layui.element,$ = layui.jquery;
        // 监听选项卡切换
        element.on('tab(filter)', function(data){
            pageLoading();
            type = data.index;
            table.reload('testReload', {
                url: '{:url("accounts")}?t=json',
                where: {type:data.index} //设定异步数据接口的额外参数
            });
        });
        table.render({
            elem: '#test',
            height: 'full-210',
            url: '{:url("accounts")}?t=json',
            method: 'post',
            toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
            id: 'testReload',
            page: {limit: 30},
            skin: 'line',
            loading:false,
            cols: [[
                {field: 'name', title: '账户名称',width:120},
                {field: 'name_id', title: '账户ID',width:120},
                {field: 'channel_name', title: '端口',width:100},
                // {field: 'pid', title: '账户类型',width:100, templet: function (d) {
                //         return d.pid ? '子账户' : '<span style="color: red;font-weight: bold;">主账号</span>'
                // }},
                {field: 'industry', title: '行业',width:100},
                // {field: 'expend', title: '账户币总充值',width:100},
                {field: 'balance', title: '账户币余额',width:100},
                // {field: 'num', title: '子账户数量',width:100},
                {field: 'status', title: '账户状态', templet: '#switchTpl', unresize: true,width:100},
                {field: 'jindu', title: '账户进度', templet: '#jinduswitchTpl', unresize: true,width:100},
                {field: 'is_launch', title: '是否投放',width:120,sort:true, templet: function (d) {
                        return d.is_launch>0 ?'<span class="layui-badge">是</span>':'<span class="layui-badge layui-bg-gray">否</span>'
                }},
                {field: 'is_accredit', title: '是否授权',width:120,sort:true, templet: function (d) {
                    return d.is_accredit==1 ?'<span class="layui-badge">是</span>':'<span class="layui-badge layui-bg-gray">否</span>'
            	}},
                {field: 'lv', title: '完成率',width:100},
                {field: 'operate_name', title: '运营',width:180},
                {fixed: 'right', width: '15%', title: '操作', toolbar: '#barDemo'}
            ]],
            done: function () {
                // 添加分页加载动画的函数    
                $('.layui-laypage > a').each(function(){
                    $(this).attr('onclick',"pageLoading(this)");
                })
                layer.close(loadingIndex);
            }
        });
        //监听性别操作
        form.on('switch(sexDemo)', function (obj) {
            //layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);

            var x = obj.elem.checked;
            var id = this.value;
            layer.confirm('您确认要修改账号状态吗？', {
                btn: ['确认', '取消'] //按钮
            }, function () {
                get_save_acc_status(obj, id, x)

            });
            obj.elem.checked = !x;
            form.render();
        });
        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            switch (obj.event) {
                case 'getAdd':
                    get_add();
                break;
                
            }

        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            //console.log(data.id)
            switch (obj.event) {
                case 'addAcc':
                    get_add(data.id);
                    break;
                case 'edit':
                    get_save(data.id);
                    break;
                case 'getImpower':
                    layer.confirm('请确认在当前浏览器已登录,当前投放后台，然后点击确认前往授权页进行授权,请选择授权端口', 
                        function(index, layero){
                            if(type == 0){
                                get_kuaishou_impower(data.id);
                                layer.close(index);
                            }else if(type == 1){
                                get_impower(data.id);
                                layer.close(index);
                            }else if(type == 2){
                                
                                u = 'https://xg.zhihu.com/';
                                window.open(u);
                                layer.close(index);
                                layer.confirm('是否获取授权', function(index){
                                    window.open('https://xg.zhihu.com/api/v1/canvas/token');
                                    layer.close(index);
                                    layer.prompt({ formType: 2, title: '请输入获取的data参数' }, 
                                        function(value,index1){
                                            add_zhihu(data.id,data.name_id,value);
                                            layer.close(index1);
                                        }
                                    );
                                }); 
                                
                            }else if(type == 3){
                                get_qq_impower(data.id)
                                layer.close(index);
                            }else if(type == 4){
                                alert('百度，开发中。。。');
                                layer.close(index);
                            }
                            
                        }
                    );
                	
                	break;
                case 'info':
                        get_info(data.id);
                    break;
            }

        });

    });
    //提交知乎授权
    function add_zhihu(acc_id,name_id,token){
        pageLoading();
        $.post('{:url("Callback/zhihu")}?t=json',{acc_id:acc_id,name_id:name_id,token:token},function(da){
            layer.close(loadingIndex);
            if(da.code == 1){
                get_s(da['msg'])
                // layer.msg(da['msg'], {icon: 6});
            }else if(da.code == 0){
                layer.msg(da['msg'], {icon: 5});
                
            }
        })
    }

    //修改账号状态
    function get_save_acc_status(obj, id, status) {

        sta = status ? '1' : "0";
        layer.load(1, {shade: [0.5, '#676a6c']});
        $.post("{:url('get_save_acc_status')}?t=json", {id: id, status: sta}, function (data) {
            layer.closeAll();
            if (data.code == 1) {
                layer.msg(data['msg'], {icon: 6});
                obj.elem.checked = status;
                form.render();
            } else {
                layer.msg(data['msg'], {icon: 5});

            }

        });
    }

    //重载数据表
    function get_s(msg) {
        pageLoading();
        table.reload('testReload', {
            url: '{:url("accounts")}?t=json',
            where: {type:type} //设定异步数据接口的额外参数
            //,height: 300
        });
        layer.msg(msg, {icon: 6});
    }

    function get_ss() {
    	pageLoading();
        var name = $("#name").val();
		var name_id = $("#name_id").val();
		var industry_id = $("#industry_id").val();
		var channel_id = $("#channel_id").val();
		var operate_id = $("#operate_id").val();
        table.reload('testReload', {
            url: '{:url("accounts")}?t=json',
            where: {name: name,name_id:name_id,industry_id:industry_id,channel_id:channel_id,operate_id:operate_id,page:1,type:type} //设定异步数据接口的额外参数
        	
        });
    }
</script>